<template>
  <div id="Software" class="container">
    <serch-line v-model:keyWord="keyWord" :keyWord="keyWord"/>
    <div class="category">
      <div class="left-category">According to manufacturing equipment</div>
      <div class="box-category">
        <!-- 使用 v-for 来遍历 categoryList -->
        <div v-for="(category, index) in categoryList" :key="category.id" class="category-item">
          <a
            class="category-name"
            :class="{'selected': selectedCategory === category.id}"
            @click="selectCategory(category.id)"
          >
            {{ category.name }}
          </a>
        </div>
      </div>
    </div>
    <div class="product">
    <div class="search-row">
      <div class="by-location">
        By Location
      </div>
<!--        <el-input v-model="input" @change="" style="width: 210px;margin-left: 10px" placeholder="Please input" />-->
      <div class="location-checkbox-list">
        <!-- 遍历 locationList 渲染每个单选框 -->
        <div v-for="(location, index) in locationList" :key="location.id" class="location-item">
          <el-checkbox
            v-model="selectedLocation"
            :label="location.id"
            @change="handleLocationChange(location)"
          >
            {{ location.enName }}
          </el-checkbox>
        </div>
      </div>
      <div class="by-location">
        By Manufacturer
      </div>
<!--      <el-input v-model="input1" style="width: 210px;margin-left: 10px" placeholder="Please input" />-->

      <div class="location-checkbox-list">
        <div v-for="(location, index) in listManufacturers" :key="location.id" class="location-item">
          <el-checkbox
            v-model="selectedLocation1"
            :label="location.id"
            @change="handleManuChange1(location)"
          >
            {{ location.enName }}
          </el-checkbox>
        </div>
      </div>

    </div>
    <div class="product-row">
      <div
        v-for="(product, index) in productList"
        :key="product.id"
        class="product-box"
      >

        <img :src="product.imgCover" alt="Product Image" class="product-img" />
        <div class="product-info">
          <h3 class="product-name">{{ product.name }}</h3>
          <div
            class="new-flag"
            :class="{'new-flag-green': product.newFlag === 1, 'new-flag-gray': product.newFlag === 0}"
          >
            NEW
          </div>
          <p class="product-loc">Location：<el-icon><Location /></el-icon>{{ product.location }}</p>
          <div class="desc-box">
            <p class="product-desc">{{ product.productDesc }}</p>
            <div class="btn-box">
              <p class="product-loc-1"><el-icon><Location /></el-icon>{{ product.location }}</p>
              <el-button color="#F7514B" style="color: white"  @click="goToDetail(product)" class="ctrpbtn">Click to Request Price</el-button>
              <!-- 推荐指数 -->
              <div class="recommend-index">
              <span v-for="n in 5" :key="n" class="star" :class="{'active': n <= product.recommendLevel}">
              ★
              </span>
              </div>
            </div>
          </div>
        </div>
        <div class="blue-box">Trusted Seller</div>
      </div>
      <div v-if="productList.length==0" style="width: 100%;font-size: 15px;text-align: center;color: #5e5e5e" >NO DATA... ...</div>

    </div>
    </div>

  </div>
</template>

<script setup name="Software">
import { useRouter,useRoute } from 'vue-router';
import serchLine from './components/search-line.vue';
import { onMounted,ref,watch } from 'vue'
import axios from 'axios'
import ReportApiUrlConfig from '@/api/select.ts'

const categoryList=ref([])
const searchFlag=ref(true);
const productList=ref([])
const locationList=ref([])
const listManufacturers=ref([])
const selectedLocation=ref();
const selectedLocation1=ref();
const router=useRouter()
const input=ref(null)
const input1=ref(null)
const route=useRoute()
const keyWord = ref(route.query.keyWord || '');
const postData =ref({
  categoryId: null, // 分类ID
  name: null,// 名称名字
  keyWord: null
});
// 根据关键字搜索产品



const search =async ()=> {
  postData.value.keyWord = keyWord.value;
  try {
    const { data } = await axios.post(ReportApiUrlConfig.productList, postData.value);
    if (data) {
      productList.value = data.rows;
    }
  } catch (error) {
    console.error("Error fetching product list:", error);
  } finally {
    // 将 postData 恢复到初始状态
    postData.value = {
      categoryId: null,
      name: null,
      keyWord: null,
    };
  }
}

const goToDetail=(row)=> {
  // 使用 this.$router.push 跳转到 detail 页面
  router.push('/detail/'+row.id);
}
const querySupplyUseNum = async () => {
  const { data } = await axios.get(ReportApiUrlConfig.categooryList);
  if (!data) return;
  categoryList.value = data.data;
};
const querySupplyUseNum1 = async () => {
  // 修改为 POST 请求，传递参数
  const { data } = await axios.post(ReportApiUrlConfig.productList, postData.value);
  if (!data) return;
  productList.value = data.rows;
};

const querySupplyUseNum2 = async () => {
  const { data } = await axios.get(ReportApiUrlConfig.listLocation);
  if (!data) return;
  locationList.value = data.data;
};
const querySupplyUseNum3 = async () => {
  const { data } = await axios.get(ReportApiUrlConfig.listManufacturers);
  if (!data) return;
  listManufacturers.value = data.data;
};
querySupplyUseNum3();
querySupplyUseNum2();
querySupplyUseNum();
const handleManuChange = (manu) => {
  console.log('选中的 location:', manu);
  // 在这里可以添加你希望触发的逻辑
};
// 处理 location 变更的事件
const handleLocationChange = async(location) => {
  postData.value.locationId = location.id;
 search();
};
const handleManuChange1 = async(location) => {
  postData.value.manufacturerId = location.id;
  search();
};

const selectCategory= async (categoryId)=> {
  postData.value.categoryId = categoryId;
  search();
}
onMounted(() => {

})
const searchProducts = async () => {
  postData.value.keyWord = keyWord.value
  search();
};

// 监听 keyWord 的变化并重新搜索 **新增**
watch(keyWord, (newKeyword) => {
  searchProducts(newKeyword);
}, { immediate: true });

</script>


<style scoped>
.container{
  width: 100%;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: #F7F8F9;
}

.category{
  width: 80%;
  font-family: PingFangSC, PingFang SC;
  font-weight: normal;
  font-size: 16px;
  color: #30A9FC;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.left-category{
  line-height: 40px;
  border-bottom: 1px solid #e0e0e0;
}
.box-category {
  margin: 5px;
  display: flex;
  flex-wrap: wrap; /* 使得内容换行 */
  gap: 5px; /* 每个项目之间的间隙 */
  justify-content: flex-start;
  width: 100%; /* 控制每行显示的宽度 */
}

.category-item {
  width: calc(16.66% - 10px); /* 每行显示 6 个 item */
  text-align: start;
}

.category-name {
  font-family: PingFangSC, PingFang SC;
  font-weight: normal;
  font-size: 14px;
  color: #B0B0B0;
  line-height: 25px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  display: inline-block;
  margin-bottom: 5px;
  position: relative;
  padding-bottom: 2px; /* 调整下划线与字体的距离 */
  text-decoration: underline; /* 默认下划线 */
  text-decoration-color: #B0B0B0; /* 未选中时为灰色 */
  cursor: pointer; /* 显示点击样式 */
}

.category-name:hover {
  color: black; /* 鼠标悬浮时字体变为黑色 */
}

.product{
  margin-top: 30px;
  margin-bottom: 30px;
  width: 80%;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.search-row{
  margin: 5px;
  width: 20%;
  height: 900px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影 */
}
.product-row {
  margin: 5px;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.product-box {
  position: relative;
  display: flex;
  padding: 10px;
  width: 100%;
  height: 300px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  text-align: center;
  background-color: #fff;
  gap: 20px;
}

.product-img {
  margin-left: 30px;
  width: 25%;
  height: 95%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}



.product-info {
  width: 85%;
  height: 95%;
}



.product-name {
  margin: 0px;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制为两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;    /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 (...) */

  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 20px;
  color: #242E7B;
  line-height: 30px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  text-decoration: underline; /* 添加下划线 */
  text-decoration-color: #242E7B; /* 下划线颜色 */
  text-underline-offset: 4px;
}
.product-loc {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: left;
}

.product-loc-1 {
  font-size: 16px;
  text-align: left;

  font-family: PingFangSC, PingFang SC;
  font-weight: normal;
  font-size: 12px;
  color: #999999;
  line-height: 36px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.product-desc {
  width: 70%;
  font-size: 14px;
  color: #666;
  margin: 10px 0;
  line-height: 1.5; /* 每行 1.5 倍行高 */
  max-height: calc(1.5em * 5); /* 最大显示 5 行 */
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /* 必须使用 -webit-box */
  -webkit-line-clamp: 5; /* 限制显示 5 行 */
  -webkit-box-orient: vertical; /* 必须设置为垂直方向 */
}

.blue-box {
  width: 127px;
  line-height: 35px;
  position: absolute;
  font-size: 15px;

  color: white;
  background-color: rgba(48, 169, 252, 0.7);
  bottom:40px;
  left: 0px;
}

.ctrpbtn{
  width: 204px;
  height: 40px;
  background: #e86335;
  border-radius: 10px 10px 10px 10px;
}
.recommend-index{
  width:100px;
  height: 240px;
}

.recommend-index {
  margin-top: 10px;
  font-size: 16px;
}

.star {
  color: #ddd; /* 灰色星星 */
}

.star.active {
  color: #ffcc00; /* 黄色星星 */
}

/* NEW 标签的样式 */
.new-flag {
  margin:10px 10px 5px 5px;
  padding: 2px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  width: 80px;
}

.new-flag-green {
  border: 1px solid #4abf4a;
  color: #4abf4a;
  background-color: white;
}

.new-flag-gray {
  border: 1px solid gray;
  color: gray;
  background-color: white;
}
.by-location {
  margin: 10px;
  font-family: PingFangSC, PingFang SC;
  font-weight: bolder;
  font-size: 16px;
  color: #30A9FC;
  line-height: 36px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  border-bottom: 1px #B0B0B0 solid;
}
.by-location {
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
}

.location-checkbox-list {
  margin-left: 20px;
  margin-top: 10px;
  height:200px;
  width: 100%;
}

.location-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.desc-box{
  display: flex;
  flex-direction: row;
  justify-content: space-between;

}
.btn-box{
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

